<template>
    <div class="navicate-item">
        <div class="system-logo">

        </div>
        <el-menu :default-active="defaultActive" router>
            <div v-for="father in navicates">
                <el-sub-menu v-if="father.children.length > 0" :index="father.path">
                    <template #title>
                        <el-icon>
                            <component :is="father.icon" />
                        </el-icon>
                        <span>{{ father.name }}</span>
                    </template>
                    <el-menu-item v-for="child in father.children" :index="child.path">
                        <template #title>
                            <el-icon>
                                <component :is="child.icon" />
                            </el-icon>
                            <span>{{ child.name }}</span>
                        </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item  v-if="father.children.length == 0" :index="father.path">
                    <template #title>
                        <el-icon>
                            <component :is="father.icon" />
                        </el-icon>
                        <span>{{ father.name }}</span>
                    </template>
                </el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

<script setup>
import apis from '@apis'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const navicates = ref([])
const defaultActive = ref('')

const initNavicates = () => {

    apis.pages.gets().then(res => {
        let fathers = []
        let childrens = []
        res.pages.filter(item => {
            if (!item.father || item.father == 0) {
                fathers.push(item)
            } else {
                childrens.push(item)
            }
        })
        for (let index = 0; index < fathers.length; index++) {
            fathers[index].children = []
            childrens.filter(item => {
                if (item.father == fathers[index].id) {
                    fathers[index].children.push(item)
                }
            })
        }
        navicates.value = fathers
    })
}

const initDefaultActive = () => {
    let path = router.currentRoute.value.path
    defaultActive.value = path 
}

onMounted(() => {
    initNavicates()
    initDefaultActive()
})
</script>

<style scoped>
.navicate-item {
    width: 200px;
    height: 100%;
}
.system-logo {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #eaeaea;
}
</style>